<script lang="tsx" setup>
import PageHeader from '../../components/page-header.vue';
import { getSubTabInfo } from '../../utils';
import { ModuleEnum } from './constants';
import EsgReporting from './modules/esg-reporting.vue';
import ControversialEvents from './modules/controversial-events.vue';
import ManagementSystemCertification from './modules/management-system-certification.vue';

interface Props {
  tabs: Record<string, any>;
}

const { tabs } = defineProps<Props>();

const esg_reporting = getSubTabInfo(tabs.functions, ModuleEnum.ESG_REPORTING);
const controversial_events = getSubTabInfo(tabs.functions, ModuleEnum.CONTROVERSIAL_EVENTS);
const management_system_certification = getSubTabInfo(tabs.functions, ModuleEnum.MANAGEMENT_SYSTEM_CERTIFICATION);
</script>

<template>
  <page-header :title="tabs.name" :menuId="tabs.id" />
  <esg-reporting
    v-if="esg_reporting && esg_reporting.status === 0"
    :menuId="esg_reporting.id" :count="esg_reporting.count"  :title="esg_reporting.name"/>
  <controversial-events
    v-if="controversial_events && controversial_events.status === 0"
    :menuId="controversial_events.id" :count="controversial_events.count" :title="controversial_events.name"/>
  <management-system-certification
    v-if="management_system_certification && management_system_certification.status === 0"
    :menuId="management_system_certification.id" :count="management_system_certification.count" :title="management_system_certification.name"/>
</template>
